<template>
  <a-row  type="flex" class="bar" ref="btnRow">
    <a-col flex="auto">
      <!-- btn-group -->
      <a-button-group v-if="!miniType">
        <FunctionOperation
          @EventAdd="addItem"
          @EventRemoveItem="removeItem"
          @EventEditItem="editItem"
          @EventReloadMsg="reloadMsg"
          @EventSwitchCardTable="switchCardTable"
          @EventDownload="download"
          @onChange="onChange"
          :functionListShow="functionListShow"
          :funcPowerObj="funcArrayPrev"
          :data="dataSource"
          style="display:inline-block;"
        ></FunctionOperation>

        <!-- 8.更多 -->
        <a-tooltip placement="top">
          <template slot="title" v-if="!functionListShow">
            <span>{{ $t('app.setting.operation.more') }}</span>
          </template>
          <a-dropdown :trigger="['click']" v-if="funcArrayNext.length > 0" >
            <a-button type="primary" @click="e => e.preventDefault()">
              <a-icon type="setting" />
              <span>{{ functionListShow?$t('app.setting.operation.more'):'' }}</span>
            </a-button>
            <a-menu slot="overlay">
              <a-menu-item v-for="(item,index) in funcArraySurplus" :key="index">
                <a-button type="primary" @click="callFunction(actionEvent[item.label])">
                  <a-icon type="plus" />
                  <span>{{ $t(`app.setting.operation.` + item.label) }}</span>
                </a-button>
              </a-menu-item>
            </a-menu>
          </a-dropdown>
        </a-tooltip>
      </a-button-group>
      
      <!-- 适配处理 - 全部下拉显示 -->
      <a-dropdown v-else :trigger="['click']">
        <a-button type="danger" @click="e => e.preventDefault()">
          <a-icon type="setting" />
          <span>{{ functionListShow?$t('app.setting.operation.more'):'' }}</span>
        </a-button>
        <a-menu slot="overlay">
          <a-menu-item v-if="funcPowerObjPrev.add">
            <a-button type="primary" @click="addItem">
              <a-icon type="plus" />
              <span>{{ $t('app.setting.operation.add') }}</span>
            </a-button>
          </a-menu-item>
          <a-menu-item v-if="funcPowerObjPrev.delete">
            <a-button type="danger" @click="removeItem">
              <a-icon type="delete" />
              <span>{{ $t('app.setting.operation.delete') }}</span>
            </a-button>
          </a-menu-item>
          <a-menu-item v-if="funcPowerObjPrev.edit">
            <a-button type="primary" @click="editItem">
            <a-icon type="edit" />
            <span>{{ $t('app.setting.operation.edit') }}</span>
          </a-button>
          </a-menu-item>
          <a-menu-item v-if="funcPowerObjPrev.reload">
            <a-button type="primary" @click="reloadMsg">
              <a-icon type="undo" />
              <span>{{ $t('app.setting.operation.reload') }}</span>
            </a-button>
          </a-menu-item>
          <a-menu-item v-if="funcPowerObjPrev.column">
            <a-dropdown v-model="visible">
              <a-button type="primary" @click="e => e.preventDefault()">
                <a-icon type="appstore" />
                <span>{{ $t('app.setting.operation.column') }}</span>
                <a-icon type="down" />
              </a-button>
              <a-menu slot="overlay" @click="handleMenuClick">
                <a-menu-item v-for="(item, index ) in data" :key="index">
                  <!-- <a-checkbox @change="e => onChange(e, item, index)"  :defaultChecked="true" :disabled="index===0"> -->
                  <a-checkbox @change="e => onChange(e, item, index)"  :defaultChecked="true">
                    <span>{{item.title}}</span>
                  </a-checkbox>
                </a-menu-item>
              </a-menu>
            </a-dropdown>
          </a-menu-item>
          <a-menu-item v-if="funcPowerObjPrev.export">
              <a-button type="primary" @click="download">
              <a-icon type="download" />
              <span>{{  $t('app.setting.operation.export') }}</span>
            </a-button>
          </a-menu-item>
          <a-menu-item v-if="funcPowerObjPrev.cardTableView">
            <a-button type="danger" @click="switchCardTable">
              <a-icon type="switcher" />
              <span>{{ $t('app.setting.operation.cardTableView') }}</span>
            </a-button>
          </a-menu-item>
          <a-menu-item v-if="funcPowerObjNext.seniorSearch">
            <a-button type="danger" @click="showSeniorSearch"> 
              <a-icon type="search" />
              <span>{{ functionListShow?$t('app.setting.operation.seniorSearch'):''}}</span>
            </a-button>  
          </a-menu-item>
        </a-menu>
      </a-dropdown>
    </a-col>

    <!-- 保持原状 - 搜索 -->
    <a-col flex="auto">
      <a-col :span="12">
        <a-input-search
          :placeholder="$t('app.setting.operation.searchPlaceholder')" 
          v-model="searchInfo" 
          :enter-button="functionListShow?$t('app.setting.operation.search'):''"
          @search="searchMsg"
          style="display:inline-block;" 
          v-if="funcPowerObjNext.search"
        />
      </a-col>
      
      <a-col :span="12">
        <a-tooltip placement="top">
          <template slot="title" v-if="!functionListShow">
            <span>{{ $t('app.setting.operation.empty') }}</span>
          </template>
          <a-button type="primary" @click="clearSearch" v-if="funcPowerObjNext.search">
            <a-icon type="close" />
            <span>{{ functionListShow?$t('app.setting.operation.empty'):'' }}</span>
          </a-button>
        </a-tooltip>
        <a-tooltip placement="top">
          <template slot="title" v-if="!functionListShow">
            <span>{{ $t('app.setting.operation.seniorSearch') }}</span>
          </template>
          <a-button type="danger" @click="showSeniorSearch" v-if="funcPowerObjNext.seniorSearch && !miniType"> 
            <a-icon type="search" />
            <span>{{ functionListShow?$t('app.setting.operation.seniorSearch'):''}}</span>
          </a-button>
        </a-tooltip>
      </a-col>
    </a-col>
  </a-row>
</template>

<script>


import { i18nRender } from '@/locales'
import { setDocumentTitle, domTitle } from '@/utils/domUtil'
import store from '../../../src/store'
import bus from '@/utils/bus'
import FunctionOperation from './FunctionOperation'


export default {
  name: 'OperationBar',
  components: {
    FunctionOperation
  },
  props: {
    dataSource: Array,
  },
  data () {
    return {
      loopData: [1,2,3,4,5,6],
      miniType: false,
      visible: false,
      data: [],
      searchInfo: '',
      functionListShow: true,
      currentPageConfig: '',
      funcPowerObjCopy:[],
      funcPowerObj:{
        add: false,
        cardTableView: false,
        column: false,
        delete: false,
        export: false,
        search: false,
        reload: false,
        seniorSearch: false,
        edit: false
      },
      funcPowerObjPrev:{
        add: false,
        cardTableView: false,
        column: false,
        delete: false,
        export: false,
        reload: false,
        edit: false
      },
      funcPowerObjNext:{
        search: false,
        seniorSearch: false,
      },

      actionList:[1,2,3,4,5,6,7,8],
      funcArray: [],
      funcArrayPrev:[],
      funcArrayNext:[],
      funcArrayClean:[],
      funcArraySurplus:[],

      actionEvent:{
        add: 'addItem',
        cardTableView: 'switchCardTable',
        column: null,
        delete: 'removeItem',
        export: 'download',
        search: 'searchMsg',
        reload: 'reloadMsg',
        seniorSearch: 'showSeniorSearch',
        edit: 'editItem'
      }
    }
  },

  created(){
    this.data = this.dataSource
    this.currentPageConfig = store.getters.roles.actionChildren;
  },

  mounted(){
    // 监控功能导航的宽度
    this.itemWidthCalc();
    window.addEventListener('resize',()=>{ this.itemWidthCalc() })
    this.currentPageConfig.map((item, index)=>{
      if(item.page === this.$route.meta.name){
        this.funcPowerObjPrev.add = item.power.add?item.power.add:false
        this.funcPowerObjPrev.cardTableView = item.power.cardTableView?item.power.cardTableView:false
        this.funcPowerObjPrev.column = item.power.column?item.power.column:false
        this.funcPowerObjPrev.delete = item.power.delete?item.power.delete:false
        this.funcPowerObjPrev.export = item.power.export?item.power.export:false
        this.funcPowerObjPrev.reload = item.power.reload?item.power.reload:false
        this.funcPowerObjPrev.edit = item.power.edit?item.power.edit:false
        this.funcPowerObjNext.seniorSearch = item.power.seniorSearch?item.power.seniorSearch:false
        this.funcPowerObjNext.search = item.power.search?item.power.search:false
      }
    })
    // 处理获取左边的功能
    this.funcArray = []
    this.funcArrayClean = []
    for(let item in this.funcPowerObjPrev){
      if(this.funcPowerObjPrev[item]){
        let obj = {
          [item]: true
        }
        this.funcArray.push(obj)
        this.funcArrayClean.push(item)
      }
    }
    // 判断左边的功能的个数,大于七进行分割,最多显示七个功能,剩余功能在更多下拉中进行显示处理
    if(this.funcArray.length > 5){
      this.funcArrayPrev = [...this.funcArray.slice( 0, 5)]
      this.funcArrayNext = [...this.funcArray.slice( 5, this.funcArray.length)]
    }else{
      this.funcArrayPrev = [...this.funcArray]
      this.funcArrayNext = []
    }
    this.funcArraySurplus = this.objTransArray(this.funcArrayNext)
    setTimeout(()=>{ bus.$emit('BusPageConfig', this.funcPowerObjPrev) }, 100)
  },

  methods: {

    // 动态调用函数处理
    callFunction(funcName){
      this[funcName]();
    },

    objTransArray(obj){
      let tempResult = []
      for(let i in obj){
        for(let item in obj[i]){
          let tempObj = {
            label: item,
            value: obj[i][item]
          }
          tempResult.push(tempObj)
        }
      }
      return tempResult
    },

    // 动态计算处理
    itemWidthCalc(){
      this.$nextTick(()=>{
        let btnDomWidth = this.$refs.btnRow.$el.offsetWidth
        if( btnDomWidth && btnDomWidth <= 1249 && btnDomWidth >= 800 ){ // 宽度足够
          this.miniType = false
          this.functionListShow = false
        }else if( btnDomWidth && btnDomWidth < 800 ){ // 宽度超出计算处理
          this.miniType = true
          this.functionListShow = true
        }else if( btnDomWidth && btnDomWidth >1249 ){ // 宽度超出计算处理
          this.miniType = false
          this.functionListShow = true
        }
      })
    },

    // 屏幕宽度处理
    screenCalc(){
      // let viewWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
      // if( viewWidth < 1365 && viewWidth >= 1070 ){
      //   this.functionListShow = false
      // }else{ 
      //   this.functionListShow = true 
      // }
      // if(viewWidth < 1070){
      //   this.miniType = true
      // }else{ 
      //   this.miniType = false 
      // }
    },

    // 点击新增
    addItem(){
      let tempObj = {
        visible: true,
        type: 1,
      }
      this.$emit('showModal', tempObj) 
    },
    
    // 点击删除
    removeItem(){
      this.$emit('removeItem')
    },
    
    // 点击编辑
    editItem(){
      let tempObj = {
        visible: true,
        type: 2,
        multi: 2,
      }
      this.$emit('showModal', tempObj)
    },

    // 点击高级搜索 
    showSeniorSearch(){
      this.$emit('showSenior') 
    },

    // 点击下载
    download(){
      this.$message.warning("文件下载中，请稍等片刻~");
    },

    // 查询
    searchMsg(){
      this.$emit("searchChange", this.searchInfo)
    },
    // 清空
    clearSearch(){
      if(this.searchInfo){
        this.searchInfo = '';
        this.$emit("searchChange", this.searchInfo)
      }else{
        this.$message.warning("搜索条件已经清空！");
      }
    },
    handleMenuClick(e) {
      if (e.key === '3') {
        this.visible = false;
      }
    },

    // 动态列选择处理
    onChange(e){
      let event = e.e
      let item = e.item
      let index = e.index
      let param = {
        index: index,   // 所在数组索引
        state: event.target.checked,  // 当前列是否显示
      }
      this.$emit('columnChange', param)
    },

    // 卡片视图切换
    switchCardTable(){
      this.$emit('cardTableSwitch')
    },

    // 刷新数据处理
    reloadMsg(){
      this.$emit('reloadMsg')
    }
  },
  watch: {
    
  }
}
</script>

<style lang="less" scoped>
  .bar {
    flex-direction: row;
    justify-content: space-between;
  }
  .ant-tooltip-inner {
    background: red !important;
  }
</style>
